<template>
  <div id="selectMenu">
    <el-dialog
      class="about-set"
      title="菜单选择"
      :visible.sync="labelVisible"
      width="420px"
      :before-close="labelHandleClose"
    >
      <el-input v-model="filterText" placeholder="输入关键字进行过滤">
      </el-input>
      <el-tree
        ref="tree"
        :data="data"
        :props="defaultProps"
        :expand-on-click-node="false"
        :default-expand-all="false"
        :highlight-current="true"
        :filter-node-method="filterNode"
        @node-click="handleNodeClick"
      >
      </el-tree>
      <span slot="footer" class="dialog-footer">
        <el-button type="success" plain @click="cancelLabel">取 消</el-button>
        <el-button type="success" :loading="loading" @click="confirmLabel"
          >确认</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getMenuList } from '@/api/system/menu' // 接口
export default {
  name: 'SelectMenu',
  msg: '选择部门弹窗',
  data() {
    return {
      filterText: '',
      /*defaultProps: {
        children: 'childs',
        label: 'name'
      },*/
      defaultProps: {
        children: 'children',
        label: 'menuName'
      },
      data: [],
      selectNode: {},
      labelVisible: false, // 是否显示该弹窗
      loading: false
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },
  mounted() {
    this.getDataList()
  },
  methods: {
    /* 获取菜单信息树状结构 */
    getDataList() {
      this.loading = true
      getMenuList('', (response) => {
        this.data = response
        this.loading = false
      })
    },
    /* 筛选关键字 */
    filterNode(value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },
    /* 点击节点 */
    handleNodeClick(data, node, cur) {
      this.selectNode = { ...data }
    },
    labelHandleClose(done) {
      this.cancelLabel()
      done()
    },
    confirmLabel() {
      this.loading = true
      this.$emit('getDepartName', this.selectNode)
      this.cancelLabel()
    },
    cancelLabel() {
      // 关闭前清空
      this.selectNode = {}
      this.loading = false
      this.filterText = ''
      this.labelVisible = false
    },
    /* 显示分类 */
    showModel() {
      this.labelVisible = true
    }
  }
}
</script>

<style lang="less">
#selectMenu {
  .el-dialog {
    margin-top: 17vh !important;
  }
  .el-dialog__body {
    min-height: 310px !important;
    max-height: 400px;
    overflow: auto;
  }
  .el-input {
    margin-bottom: 15px;

    .el-input__inner {
      height: 32px;
      line-height: 32px;
    }
  }
}
</style>
